<template>
    <div>
        <!-- 线路发班统计报表 -->
        <div class="container">
            <!-- 标题栏 -->
            <div class="headstyple">
                <el-row>
                    <el-col :span="16" class="ticket-title">报表>营收统计-线路发班统计报表</el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="QueryData">
                            <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_xin_default.png" alt="" class="btn-img">新窗口
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_dayin_default.png" alt="" class="btn-img">直接打印
                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_daochu_default.png" alt="" class="btn-img">导出
                        </button>
                    </el-col>
                </el-row>
            </div>
            <!--分割线-->
            <hr/>

            <div class="bottom-container">
                <el-form :model="formList" :inline="true" class="ticketForm" id="summarySheet" >
                    <el-form-item label="班次日期起">
                        <el-date-picker type="date" size="mini" class="minipt"
                                        v-model="formList.busdatestart" value-format="yyyy-MM-dd"></el-date-picker>
                        止
                        <el-date-picker type="date" size="mini" class="minipt"
                                        v-model="formList.busdateend" value-format="yyyy-MM-dd"></el-date-picker>
                        <span><img src="../../assets/imgs/operation_bg_sousuo_default.png" alt="" class="btn-time"
                                   @click="sysdateinfo(2)"></span>
                    </el-form-item>
                    <el-form-item label="机构">
                        <el-select multiple v-model="formList.orgname"   >
                            <el-option
                                    v-for="item in orgnameList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                <span style="float: left">{{ item.no }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="营运单位">
                        <el-autocomplete
                                popper-class="my-autocomplete"
                                size="mini"
                                v-model="formList.Bus_Company"
                                :fetch-suggestions="queryBus_CompanyList"
                                @select="Bus_CompanyListSelect">
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="线路名称">
                        <el-autocomplete
                                class="inp"
                                size="mini"
                                v-model="formList.lineName"
                                :fetch-suggestions="querySearchLine"
                                @select="SearchLineNameSelect"
                        ></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="是否加班" >
                        <el-select size="mini" v-model="formList.IS_of"  @change="GetAreasLable">
                            <el-option v-for="(item) in IS_oF"
                                       :key="item.key"
                                       :label="item.label"
                                       :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班次号" >
                        <el-input size="mini" v-model="formList.BusID" class="inp"></el-input>
                    </el-form-item>
                    <el-form-item label="车牌号" >
                        <el-autocomplete
                                popper-class="my-autocomplete"
                                size="mini"
                                v-model="formList.Bus_Vehicle"
                                :fetch-suggestions="queryBus_VehicleList"
                                @select="Bus_VehicleListSelect">
                        </el-autocomplete>
                    </el-form-item>

                </el-form>
            </div>


            <template>
                <div v-html="Report" class="Report"></div>
            </template>

        </div>

        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--弹窗页面部分-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <!-- 修改弹窗 -->
                        <div>
                            <el-row class="driver-container">
                                <el-col>
                                    <div>
                                        <el-table style="width: 100%" :data="DatetableData" height="290px" @row-dblclick="sysdate">
                                            <el-table-column type="index" width="20px"></el-table-column>
                                            <el-table-column prop="date_name" label="名称"></el-table-column>
                                            <el-table-column prop="date_start" label="起始日期"></el-table-column>
                                            <el-table-column prop="date_end" label="结束日期"></el-table-column>
                                            <el-table-column prop="beizhu" label="备注"></el-table-column>
                                        </el-table>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <button class="check-btn rf" @click="closeformwindows"><img
                            src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt=""
                            class="btn-img">取消
                    </button>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import FormData from "../../components/common/form";
    import TableData from "../../components/common/tableData";
    import qs from "qs";

    export default {

        data() {
            return {
                formList: {
                    BusID: "",
                    Bus_Vehicle: "",
                    busdatestart: "",
                    busdateend: "",
                    orgname: [],
                    Bus_Company: "",
                    lineName: "",
                    IS_of: "",
                },
                orgnameList: [],

                Report: "",

                Bus_CompanyList: [],
                BusLineList: [],
                Bus_VehicleList: [],

                modelShow: false,
                modalTitle: "",
                DatetableData:[],
                infotype:"",
                CompanyId: "",


                LineNamevalue: "",

                OFLable: "",


                IS_oF: [
                    {
                        key: 1,
                        label: "",
                        value: "",
                    },
                    {
                        key: 2,
                        label: "是",
                        value: "1",
                    },
                    {
                        key: 3,
                        label: "否",
                        value: "0",
                    },

                ],

            };
        },

        methods: {


            //线路搜索框建议数据
            querySearchLine(queryString, cb) {
                var restaurants = this.BusLineList;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            }, createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },


            //车牌号搜索框建议数据
            queryBus_VehicleList(queryString, cb) {
                var restaurants = this.Bus_VehicleList;
                var results = queryString ? restaurants.filter(this.VehiclecreateFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            }, VehiclecreateFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },



            SearchLineNameSelect(item) {
                this.LineNamevalue = item.id;
            },


            Bus_CompanyListSelect(item) {
                this.CompanyId = item.id;

            },

            Bus_VehicleListSelect(item) {
                console.log(item);
            },


            //营运单位搜索框建议数据
            queryBus_CompanyList(queryString, cb) {
                var restaurants = this.Bus_CompanyList;
                var results = queryString ? restaurants.filter(this.CompanycreateFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            }, CompanycreateFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },


            //机构列表
            loadbusstation(){
                this.$http
                    .post("/sys/org/nameList")
                    .then(data => {
                        this.orgnameList = data.data;
                        console.log(data)
                    })
            },



            //加载车牌号列表数据
            loadBus_VehicleList() {
                this.$http.get("/sch/data/bus_vehicle/listWithSpell")
                    .then(data => {
                            for (var item of data.data) {
                                this.Bus_VehicleList.push({
                                    id: item.card_no,
                                    value: item.vehi_no,
                                    _spell: item._spell,
                                })
                            }
                        }
                    )
            },


            //加载系统线路列表数据
            loadLineList() {
                this.$http.get("/sch/data/line/listWithSpell")
                    .then(data => {
                            // console.log("11a");
                            for (var item of data.data) {
                                this.BusLineList.push({
                                    value: item.name,
                                    id: item.id
                                });
                            }
                        }
                    )
            },

            //加载营运单位列表数据
            loadBus_CompanyList() {
                this.$http.get("/sch/data/bus_company/listWithSpell")
                    .then(data => {
                            for (var item of data.data) {
                                this.Bus_CompanyList.push({
                                    code: item.code,
                                    id: item.id,
                                    value: item.name,
                                    _spfull: item._spfull,
                                    _spshort: item._spshort,
                                })
                            }
                        }
                    )
            },


            GetAreasLable(val) {
                let obj = {};
                obj = this.IS_oF.find((item)=>{
                    return item.value === val;
                });
                console.log(obj);
                if(obj!=""&&obj!=undefined){
                    this.OFLable = obj.label;
                }

            },

            //获取弹窗
            sysdateinfo(info){
                console.log(info);
                this.infotype = info;
                this.getsysdate();

                this.modelShow = true;
                this.modalTitle = "选择日期";
                console.log(this.modelShow);
            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },
            //关闭弹窗
            closeformwindows() {
                this.modelShow = false;
            },
            //获取弹窗时间数据
            getsysdate(){
                this.DatetableData=[];
                this.$http
                    .post("/sys/customdatescope/list")
                    .then(data => {
                        console.log(data.data);
                        console.log(data.data.list);
                        for(var item of data.data.list){
                            this.DatetableData.push({
                                id:item.id,
                                date_name:item.name,
                                date_start:item.start_date,
                                date_end:item.end_date,
                                beizhu:item.remark,
                            })
                        }
                    })
            },
            //双击获取自定义日期
            sysdate(row,event){
                console.log(row);
                if(this.infotype==1){
                    this.formList.starDate = row.date_start;
                    this.formList.endDate = row.date_end ;
                }else if(this.infotype==2){
                    this.formList.busdatestart = row.date_start ;
                    this.formList.busdateend = row.date_end ;
                }
                this.modelShow = false;
            },
            //时间处理,获取当天时间
            todayfunction(){
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                console.log(nowday);
                this.formList.busdatestart = nowday ;
                this.formList.busdateend = nowday;
            },

            //encodeURI 编码
            QueryData(){
                console.log(this.formList.orgname);
                //通过select的机构选择框，获取其名称
                let getorgnames = [];
                let getorgids = this.formList.orgname;
                if(getorgids.length>0){
                    for(let item of getorgids){
                        for(let temp of this.orgnameList){
                            if(item == temp.id){
                                getorgnames.push(temp.name);
                                continue;
                            }
                        }
                    }
                }
                let parm = '[{"text":"机构:","field":"orgs","value":"'+getorgids+'","valuename":"'+getorgnames+'"},' +
                    '{"text":"车牌号:","field":"vehino","op":"eq","value":"'+this.formList.Bus_Vehicle+'","valuename":"'+this.formList.Bus_Vehicle+'"},' +
                    '{"text":"班次号:","field":"busid","op":"eq","value":"'+this.formList.BusID+'","valuename":"'+this.formList.BusID+'"},' +
                    '{"text":"班次日期起:","field":"be_busdate","op":"dge","value":"'+this.formList.busdatestart+'","valuename":"'+this.formList.busdatestart+'"},' +
                    '{"text":"止:","field":"ed_busdate","op":"dle","value":"'+this.formList.busdateend+'","valuename":"'+this.formList.busdateend+'"}' +
                    '{"text":"是否加班:","field":"is_ot","op":"eq","value":"'+this.formList.IS_of+'","valuename":"'+this.formList.OFLable+'"}' +
                    '{"text":"线路名称:","field":"line_name","op":"cn","value":"'+this.formList.lineName+'","valuename":"'+this.formList.lineName+'"}' +
                    '{"text":"营运单位:","field":"customer_id","op":"eq","value":"'+this.CompanyId+'","valuename":"'+this.formList.Bus_Company+'"}]';
                let sqlparm = '{"orgs":"'+getorgids[getorgids.length-1]+'",' +
                    '"vehino":"'+this.formList.Bus_Vehicle+'","busid":"'+this.formList.BusID+'",' +
                    '"be_busdate":"'+this.formList.busdatestart+'","ed_busdate":"'+this.formList.busdateend+'"' +
                    '"is_ot":"'+this.formList.IS_of+'","line_name":"'+this.formList.lineName+'"' +
                    '"customer_id":"'+this.CompanyId+'","customerName":"'+this.formList.Bus_Company+'"}';
                //编码
                let rpT = encodeURIComponent("营收统计");
                let rpN = encodeURIComponent("线路发班统计报表");
                this.$http
                    .get(
                        '/reports',
                        {
                            params:{
                                rpType: rpT,
                                rpName: rpN,
                                protype: 98,
                                rpparajson: encodeURIComponent(parm),
                                sqlparajson: encodeURIComponent(sqlparm),
                            }
                        }
                    )
                    .then(data => {
                        this.Report = data.data;
                    })
            },



        },
        mounted(){
            this.loadbusstation();
            this.todayfunction();
            this.loadBus_CompanyList();
            this.loadBus_VehicleList();
            this.loadLineList();

        },
    }
</script>
<style scoped>

    @import url('../../assets/css/Report/Report.css');

    .check-btn {
        width: 100px;
    }
    .el-form--inline .el-form-item{
        margin-right: 100px;
    }
    #summarySheet .el-date-editor.el-input{
        width:134px!important;
    }
    .Report {
        overflow-x: scroll;
    }

</style>
